<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="50%">
        <el-image :src="url" fit="cover"></el-image>
      </el-aside>
      <el-main>
        <el-form
            :label-position="labelPosition"
            label-width="100px"
            :model="formLabelAlign"
            status-icon
            :rules="rules"
            style="max-width: 90%;height:90%;margin-top: 5%"
        >
          <el-form-item label="name" prop="name">
            <el-input v-model="formLabelAlign.name" placeholder="必填"/>
          </el-form-item>
          <el-form-item label="password" prop="pwd">
            <el-input v-model="formLabelAlign.pwd" type="password" show-password placeholder="必填"/>
          </el-form-item>
          <el-form-item label="rePassword" prop="rePwd">
            <el-input v-model="formLabelAlign.rePwd" type="password" show-password placeholder="必填"/>
          </el-form-item>
          <el-form-item label="Phone">
            <el-input v-model="formLabelAlign.phone" type="tel" placeholder="选填"/>
          </el-form-item>
          <el-form-item label="E-mail">
            <el-input v-model="formLabelAlign.email" type="email" placeholder="选填"/>
          </el-form-item>
          <el-row justify="space-evenly" style="top: 5%">
            <el-button size="large" style="width: 120px" @click="register()">注册</el-button>
            <el-button size="large" style="width: 120px" @click="clear('home')">取消</el-button>
          </el-row>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
// 左边图片加载
const url = 'http://qiniuyun.linter.top/Linter/Vue_img/User/%E6%B3%A8%E5%86%8C.png';
// 右边表单设置
import {reactive, ref} from "vue";
import {Login, Register} from "@/api";
import router from "@/router";
import {ElMessage} from "element-plus";
import {loginStatusStore} from "@/stores/counter";

const formLabelAlign = reactive({name: '', pwd: '', rePwd: '', phone: '', email: ''})
const labelPosition = ref('left')
// 进行规则的校验
const rePwdToPwd = (rule, value, callback) => {
  let pwd = formLabelAlign.pwd;
  let rePwd = formLabelAlign.rePwd;
  if (value.length >= 7 && value.length <= 16){
    if (pwd === rePwd){
      callback()
    }else {callback(new Error("与第一次输入的密码不一致"))}
    callback()
  } else {callback(new Error("长度应在7-16！"))}
}
const rules = reactive({
  name:[{required: true,message: '请输入名称',trigger: 'blur'},
    {min: 3, max: 8, message: "用户名称长度为3-8", trigger: 'blur'}],
  pwd: [{required: true, message: "请输入密码！", trigger: 'blur'},
    {min: 7, max: 16, message: "密码长度为7-16", trigger: 'blur'}],
  rePwd: [{required: true, message: "请再次输入密码!", trigger: 'blur'},
    {validator: rePwdToPwd, trigger: 'blur'}]
})
// 注册方法
function register() {
  let username = formLabelAlign.name
  let password = formLabelAlign.pwd
  let phone = formLabelAlign.phone
  let email = formLabelAlign.email
  let user = {username, password, phone, email}
  Register(user).then((res) => {
    console.log(res);
    let message = res.data.message
    console.log(message)
    if (message === '注册成功'){
      ElMessage({showClose: true, message: message, type: 'success'})
      Login(user).then((msg) => {
        const store = loginStatusStore()
        store.logStatus = 1
        sessionStorage.setItem('LoginStore', store.logStatus)
        ElMessage({showClose: true, message: '已自动登录'})
        // 将返回的token存入浏览器
        const token = msg.data.data
        window.localStorage.setItem("token", 'Bearer\xa0' + token)
      })
      router.replace({name: 'home'})
    }
    else {ElMessage({showClose: true,message: message,type: 'error',})}
  })
}
function clear(url) {
  // 取消登录并返回首页
  router.replace({
    name: url
  })
}
</script>

<style scoped>
.common-layout{
  /*border: 1px solid brown;*/
  width: 80%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  margin-left: 10%;
  margin-top: 5%;
}
</style>
